<template>
  <div :class="['btn', 'H_Regular', activeKey == params.key ? 'active' : '']">
    {{ params.name }}
  </div>
</template>
<script>
export default {
  name: 'btn',
  components: {},
  props: {
    params: {
      type: Object,
      default: () => {}
    },
    activeKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.btn {
  width: 81px;
  height: 29px;
  text-align: center;
  line-height: 29px;
  background-image: url('../../assets/imgs/project-img/blockTitle/btn-normal.png');
  transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  &:hover {
    background-image: url('../../assets/imgs/project-img/blockTitle/btn-active.png');
    color: rgba(255, 255, 255, 1);
  }
  &.active {
    background-image: url('../../assets/imgs/project-img/blockTitle/btn-active.png');
    color: rgba(255, 255, 255, 1);
  }
}
</style>
